<template>
  <div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">粗细</p>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini" v-model="lineSimpleStyleData.lineStyle.width" controls-position="right" :min="0" />
        <div class="attr-item-edit-input-des">宽度 (px)</div>
      </div>
      <div class="col-3 attr-item-edit-input textRight">
        曲线平滑
      </div>
      <div class="col-3 attr-item-edit-input textLeft">
        <el-switch v-model="lineSimpleStyleData.smooth" size="mini">
        </el-switch>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title"></p>
      <div class="col-1 attr-item-edit-input">
        <el-select v-model="lineSimpleStyleData.lineStyle.type" size="mini">
          <el-option label="solid" value='solid'>
            <div class="lineStyle" style="border-bottom-style: solid;"></div>
          </el-option>
          <el-option label="dashed" value='dashed'>
            <div class="lineStyle" style="border-bottom-style: dashed;"></div>
          </el-option>
          <el-option label="dotted" value='dotted'>
            <div class="lineStyle" style="border-bottom-style: dotted;"></div>
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">数据点标记</p>
      <div class="col-2 attr-item-edit-input">
       <el-select v-model="lineSimpleStyleData.symbol" size="mini">
         <!-- 圆形、方形、三角形和菱形 -->
          <el-option  label="圆形" value='circle'>圆形</el-option>
          <el-option  label="方形" value='rect'>方形</el-option>
          <el-option  label="三角形" value='triangle'>三角形</el-option>
          <el-option  label="菱形" value='diamond'>菱形</el-option>
        </el-select>
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini" v-model="lineSimpleStyleData.symbolSize" controls-position="right" :min="0" />
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">数据值显示</p>
      <div class="col-1 attr-item-edit-input">
        <div class="col-3 attr-item-edit-input textLeft">
          <el-switch v-model="lineSimpleStyleData.label.show" size="mini">
          </el-switch>
        </div>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">文本样式</p>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini" v-model="lineSimpleStyleData.label.fontSize " controls-position="right" :min="0" />
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-select v-model="lineSimpleStyleData.label.fontWeight" size="mini">
         <!-- 正常加粗细体 -->
          <el-option v-for="item in textStyleOptions" :key='item.value' :label="item.label" :value='item.value'>{{item.label}}</el-option>
        </el-select>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title"></p>
      <div class="col-2 attr-item-edit-input">
        <el-select v-model="lineSimpleStyleData.label.fontFamily" size="mini">
         <!-- 正常加粗细体 -->
          <el-option v-for="item in textOptions" :key='item.value' :label="item.label" :value='item.value'>{{item.label}}</el-option>
        </el-select>
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-input placeholder="颜色" v-model="lineSimpleStyleData.label.color" size="mini" class="input-with-select">
        </el-input>
        <el-color-picker class="colorChoose" size="mini" v-model="lineSimpleStyleData.label.color"></el-color-picker>
      </div>
    </div>

  </div>

</template>

<script>
	export default {
		name: "attr-qk-lineSimpleForm",
		props: {
			value: Object
		},
    computed: {
      lineSimpleStyleData(){
        return this.value.propsValue.barOptions.series[0]
      }
		},
		components: {
		},
    watch: {
      lineSimpleStyleData:{
        deep:true, //深度监听设置为 true
        handler:function(newV,oldV){
          let allStyle = this.value.propsValue.barOptions.series[0]
          this.value.propsValue.barOptions.series.forEach((element,index) => {
            if (index > 0) {
              element.lineStyle.width = allStyle.lineStyle.width
              element.lineStyle.type = allStyle.lineStyle.type
              element.smooth = allStyle.smooth
              element.symbol = allStyle.symbol
              element.symbolSize = allStyle.symbolSize
            }
          });
        }
      },
      'lineSimpleStyleData.label':{
        deep:true, //深度监听设置为 true
        handler:function(newV,oldV){
          let allStyle = this.value.propsValue.barOptions.series[0]
          this.value.propsValue.barOptions.series.forEach((element,index) => {
            if (index > 0) {
              element.label = allStyle.label
            }
          });
        }
      }
    },
		data() {
			return {
				num:500,
        demoStyle:[
          {label:'--------',value:1},
          {label:'————————',value:2},
        ],
        textOptions: [
        {
          value: "Microsoft YaHei",
          label: "微软雅黑"
        },
        {
          value: "monospace",
          label: "方正"
        }
      ],
      textStyle: "正常",
      textStyleOptions: [
        {
          value: "normal",
          label: "正常"
        },
        {
          value: "bold",
          label: "加粗"
        },
        {
          value: "lighter",
          label: "细体"
        }
      ]
			}
		},

    methods: {
      
    },
    created() {

		},
		mounted() {

		},
	}
</script>
<style lang="scss">
.lineStyle{
  width: 100%;
  position: relative;
  height: 50%;
  border-bottom-width: 2px;
  border-block-color: red;

}
.el-color-picker__trigger{
  border: 0;
}
.textRight{
  text-align: right;
}
.textLeft{
  text-align: left;
}
.attr-item-edit-input{
  position: relative;
  .colorChoose{
    position: absolute;
    right: 0;
  }
}
</style>
<style lang="scss">
// .el-select{
//   width: 100%;
// }
.el-color-picker__trigger{
  border: 0;
}
.textRight{
  text-align: right;
}
.textLeft{
  text-align: left;
}
.attr-item-edit-input{
  position: relative;
  .colorChoose{
    position: absolute;
    right: 0;
  }
}
</style>
<style lang="scss" scoped>
  .sizeAndPosition-wrapper {
    display: flex;
    width: 100%;
  }

  .align-type-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    &.clearFlex {
      width: 42px;
      flex: none;
    }
    i {
      line-height: 1;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
    }
    &:hover {
      i {
        color: white;
        background: $primary;
      }
    }
  }

  .attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    // text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 190px;
        margin-left: 10px;

      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>
<style lang="scss">
  .attr-item-edit-wrapper {
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 2px;
      padding-right: 32px;
      width: 90px;
    }
    .el-input-number--mini {
      width: 90px;
    }
    .el-slider__runway.show-input {
      margin-right: 108px;
    }
  }
</style>